<template>

  <div class="container">

    <div class="form">
      <div>
        <h3>欢迎访问东软云医院</h3>
      </div>
      <div>
        <el-input class="input" v-model="username" placeholder="请输入用户名" clearable/>

        <!-- <input type="text" placeholder="请输入用户名" v-model="username"> -->
      </div>
      <div>
        <el-input class="input" type="password" v-model="password" show-password placeholder="请输入用密码"/>

        <!-- <input type="password" placeholder="请输入密码" v-model="password"> -->
      </div>
      <div>
        <!-- <button @click="login">提交</button> -->

        <el-button type="primary" round @click="login">登录</el-button>

      </div>


    </div>


  </div>

</template>


<script lang="ts" setup name="App">
import {ref} from "vue";
import {useRouter, type Router} from "vue-router";
import axios from "axios";
import {service} from "@/utils/request";

//获取router

const router: Router = useRouter()


const username = ref('')
const password = ref('')


function login() {
  // alert('获取用户名、密码 发送到后端 ');

  // if (username.value == 'admin' && password.value == '123456') {
  //     alert('登录成功');
  //     //跳转到 首页
  //     // 通过js编程式路由
  //
  //     //将登录信息存储在   浏览器的  sessionStorage
  //     //浏览器内置的  sessionStorage 、LocalStorage
  //     sessionStorage.setItem('username', username.value)
  //
  //
  //     //1 找到router
  //
  //     //2  router.push('/home')  router.replace('/home')
  //     router.replace('/home')
  //
  // } else {
  //     alert('用户名或密码错误');
  // }


  let url = '/login/login?userName=' + username.value + "&password=" + password.value
  service.get(url).then(success => {

    if (success) {
      //浏览器内置的  sessionStorage 、LocalStorage
      sessionStorage.setItem('username', username.value)

      //2  router.push('/home')  router.replace('/home')
      router.replace('/home')
    }else{
      alert("用户名或者密码不正确")
    }
  })


}
</script>


<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(49, 51, 51);
  display: flex;
  justify-content: center;
  align-items: center;

}

.form {


  width: 400px;
  height: 400px;
  background-color: rgb(209, 205, 201);
  box-shadow: 0 0 50px rgb(8, 228, 125);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form .input {

  width: 260px;
  height: 60px;
  outline: none;
  margin-top: 20px;
  border-radius: 5px;
  border: solid 0.5px grey;
  font-size: 1.5em;

}


.form button {
  width: 260px;
  height: 50px;
  outline: none;
  border-radius: 3px;
  margin-top: 10px;
}
</style>